<template>
  <el-row :gutter="gutter" :style="gutterStyle">
    <el-col :span="8">
      <el-form-item prop="province">
        <el-input
          v-model="iMapForm.province"
          ref="provinceRef"
          placeholder="省"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item prop="city">
        <el-input
          v-model="iMapForm.city"
          ref="cityRef"
          placeholder="市"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item prop="district">
        <el-input
          v-model="iMapForm.district"
          ref="districtRef"
          placeholder="县"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-col :span="24">
    <el-form-item prop="address">
      <el-input
        v-model="iMapForm.address"
        placeholder="请输入详细地址"
        size="large"
        style="width: 100%"
      ></el-input>
    </el-form-item>
  </el-col>
  <AmapDialog v-model:visible="amapFlag" v-model:amap="iMapForm" />
</template>

<script setup lang="ts" name="AmapExplore">
import { ref, reactive, watch, inject, nextTick, onMounted } from 'vue'
import type { FormRules } from 'element-plus'
import type { IAddress } from './interface/index'
import AmapDialog from './components/AmapDialog.vue'

// 栅格间隔与样式
const gutter = 20
const gutterStyle = {
  width: `calc(100% + ${gutter}px)`,
  'margin-bottom': `${gutter}px`,
}

// 接收传入的formData和formRules
const { ruleForm, rules } = inject<{ ruleForm: Object; rules: any }>('aMap', {
  ruleForm: reactive({}),
  rules: reactive({}),
})

const iMapForm = ref<IAddress>({
  province: '',
  city: '',
  district: '',
  address: '',
  lnglat: [],
})

// 若地址有值，则赋予formData
watch(
  () => iMapForm,
  n => {
    // 为防止重复赋值
    if (
      n.value.province ||
      n.value.city ||
      n.value.district ||
      n.value.address
    ) {
      Object.assign(ruleForm, { ...iMapForm.value })
      console.log('监听iMapForm:', ruleForm)
    }
  },
  {
    deep: true,
  },
)

// 另处理经纬度lnglat
// watch(
//   [
//     () => iMapForm.value.province,
//     () => iMapForm.value.city,
//     () => iMapForm.value.district,
//   ],
//   n => {
//     console.log('监听省市区：', n)
//     if (n.some(item => !item)) {
//       iMapForm.value.lnglat = []
//     }
//   },
// )

// watch(
//   () => iMapForm.value.lnglat,
//   n => {
//     if (!n.length) {
//       Object.assign(ruleForm, iMapForm.value)
//       console.log('监听经纬度：', ruleForm)
//     }
//   },
// )

// 将formData赋值给iMapForm-主要作用为清空重置
// watchEffect(() => {
//   Object.assign(iMapForm.value, { ...ruleForm })
//   console.log(iMapForm.value, 'iMapForm.value')
// })

// form校验;
const iMapRules = reactive<FormRules<IAddress>>({
  province: [
    { required: true, message: '请选择省', trigger: ['blur', 'change'] },
  ],
  city: [{ required: true, message: '请选择市', trigger: ['blur', 'change'] }],
  district: [
    { required: true, message: '请选择区、县', trigger: ['blur', 'change'] },
  ],
  address: [
    { required: true, message: '请输入详细地址', trigger: ['blur', 'change'] },
  ],
})

// 合并校验数据;
// watch(
//   rules,
//   () => {
//     Object.assign(rules, { ...iMapRules })
//     console.log('合并校验数据:', rules)
//   },
//   {
//     immediate: true,
//     deep: true,
//   },
// )
onMounted(async () => {
  // 使用 nextTick 延迟执行，避免触发初始校验
  await nextTick()
  // 或者使用 setTimeout 进一步延迟
  setTimeout(() => {
    Object.assign(rules, { ...iMapRules })
    console.log('合并校验数据:', rules)
  }, 0)
})

// 地图弹窗
const amapFlag = ref<boolean>(false)
const provinceRef = ref()
const cityRef = ref()
const districtRef = ref()
const handleAmapChange = () => {
  amapFlag.value = true
  provinceRef.value.blur()
  cityRef.value.blur()
  districtRef.value.blur()
}
</script>

<style scoped lang="scss"></style>
